<template>
  <div class="balance-info">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>余额信息</span>
        </div>
      </template>
      
      <el-descriptions title="账户信息" :column="1" border>
        <el-descriptions-item label="当前余额">
          <span style="color: #ff5000; font-size: 20px;">￥{{ userInfo.balance || '0.00' }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <div class="recharge-section">
        <h3>充值金额</h3>
        <div class="amount-options">
          <el-radio-group v-model="rechargeAmount">
            <el-radio-button label="50">￥50</el-radio-button>
            <el-radio-button label="100">￥100</el-radio-button>
            <el-radio-button label="200">￥200</el-radio-button>
            <el-radio-button label="500">￥500</el-radio-button>
            <el-radio-button label="1000">￥1000</el-radio-button>
          </el-radio-group>
        </div>
        
        <div class="custom-amount">
          <el-input
            v-model="customAmount"
            placeholder="输入自定义金额"
            type="number"
            :min="0"
          >
            <template #prefix>￥</template>
          </el-input>
        </div>

        <div class="recharge-button">
          <el-button type="primary" @click="handleRecharge" :loading="loading">
            立即充值
          </el-button>
        </div>
      </div>

      <el-divider />

      <div class="transaction-history">
        <h3>交易记录</h3>
        <el-table :data="transactions" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180" />
          <el-table-column prop="type" label="类型" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.type === '充值' ? 'success' : 'danger'">
                {{ scope.row.type }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="金额">
            <template #default="scope">
              <span :style="{ color: scope.row.type === '充值' ? '#67C23A' : '#F56C6C' }">
                {{ scope.row.type === '充值' ? '+' : '-' }}￥{{ scope.row.amount }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.status === '成功' ? 'success' : 'info'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/utils/http'

const userInfo = ref({})
const rechargeAmount = ref('100')
const customAmount = ref('')
const loading = ref(false)
const transactions = ref([])

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await http.get('/user/info')
    userInfo.value = res.data
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 获取交易记录
const getTransactions = async () => {
  try {
    const res = await http.get('/transaction/list')
    transactions.value = res.data || []
  } catch (error) {
    console.error('获取交易记录失败:', error)
  }
}

// 处理充值
const handleRecharge = async () => {
  const amount = customAmount.value || rechargeAmount.value
  if (!amount || amount <= 0) {
    ElMessage.warning('请输入有效的充值金额')
    return
  }

  loading.value = true
  try {
    // 调用创建支付订单接口
    const res = await http.post(`/alipay/createOrder/${amount}`, null, {
      responseType: 'text'
    })
    
    // 创建一个临时div来显示支付表单
    const div = document.createElement('div')
    div.innerHTML = res
    document.body.appendChild(div)
    
    // 自动提交表单
    const form = div.getElementsByTagName('form')[0]
    form.submit()
    
    // 清理临时div
    document.body.removeChild(div)
  } catch (error) {
    console.error('创建支付订单失败:', error)
    ElMessage.error('创建支付订单失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getUserInfo()
  getTransactions()
})
</script>

<style scoped>
.balance-info {
  max-width: 800px;
  margin: 20px auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recharge-section {
  padding: 20px 0;
}

.amount-options {
  margin: 20px 0;
}

.custom-amount {
  max-width: 300px;
  margin: 20px 0;
}

.recharge-button {
  margin-top: 20px;
}

.transaction-history {
  margin-top: 20px;
}
</style> 